<template>
	<!-- 查看单词释义 -->
	<uni-popup ref="viewWordDialog" type="center">
		<view class="word-info text-df bg-white padding-lg text-black text-sm ">
			<view class="text-center text-bold text-xxl margin-bottom-lg ">{{wordInfo.word}}</view>
			<view v-for="(meaning,index) in wordInfo.interpretations" :key="index">
				<text>{{meaning.type}} : </text>
				<text>{{meaning.data}} </text>
			</view>

			<view v-if="wordInfo.familiar===1">
				<cl-icon type="plus" size="32" color="purple" @tap="handleFamiliar(2)"
					class="margin-right-sm"></cl-icon>
				<cl-icon type="close" size="32" color="black" @tap="handleFamiliar(3)"></cl-icon>
			</view>
			<view v-else-if="wordInfo.familiar===2">
				<cl-icon type="minus" size="32" color="red" @tap="handleFamiliar(1)" class="margin-right-sm"></cl-icon>
				<cl-icon type="close" size="32" color="black" @tap="handleFamiliar(3)"></cl-icon>
			</view>

			<view v-else-if="wordInfo.familiar===3">
				<cl-icon type="minus" size="32" color="red" @tap="handleFamiliar(1)" class="margin-right-sm"></cl-icon>
				<cl-icon type="plus" size="32" color="purple" @tap="handleFamiliar(2)"></cl-icon>
			</view>
			<!-- 	<view class="margin-top-xl">例句 : </view>
			<view v-for="(sentence,index) in wordInfo.sentence" :key="index" class="margin-bottom-lg">
				<view>{{sentence.en}}</view>
				<view>{{sentence.ch}}</view>
			</view> -->
		</view>
	</uni-popup>

	<!-- 恢复为生词 -->
	<uni-popup ref="changeWordDialog" type="center">
		<view class="word-info text-df bg-white padding-lg text-black text-sm ">
			<view class="text-center text-bold text-xxl margin-bottom-lg ">恢复为生词</view>
			<view>
				确定将当前单词从我的学习词库中删除,并恢复为红色生词吗?
			</view>
			<view class="margin-top-lg flex justify-end">
				<button class="mini-btn" type="warn" size="mini" @click="changeUnkown">删除</button>
				<button class="mini-btn" type="default" size="mini" @click="cancelChangeFamiliar">取消</button>
			</view>
		</view>
	</uni-popup>
	<view @tap="handleTap" class="container ">
		<scroll-view scroll-y>
			<view v-for="(paragraph,index) in chapter.content" :key="index" class="paragraph"
				:class="paragraph.type==='img'?'flex justify-center':''">
				<template v-if="paragraph.type==='text'">
					<text v-for="(data,cIndex) in (paragraph.data as WordInterface[])" :key="cIndex" :data-word="{
						text:data.word,
						familiar:data.familiar,
						id:data.id,
						type:data.type
					}" :class="[cIndex===0? 'firstWord':'margin-right-sm',getFamiliarColor(data.familiar)]">
						{{data.word}}
					</text>
				</template>
				<image v-else-if="paragraph.type==='img'" :src="paragraph.src" mode="aspectFit"></image>
			</view>
		</scroll-view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import { getWord } from '@/apis/word.js'

	type FamiliarType = 1 | 2 | 3;
	interface WordInterface {
		word : string;
		familiar : FamiliarType
		id : string
	}
	interface SignInterface {
		word : string;
		type : 'sign';
		id : string
	}

	interface TextInterface {
		type : 'text';
		id : string;
		data : (WordInterface | SignInterface)[]
	}
	interface ImgInterface {
		id : string;
		type : 'img';
		src : string;
	}
	interface ChapterInterface {
		title : string;
		content : (TextInterface | ImgInterface)[]
	}

	const viewWordDialog = ref()
	const changeWordDialog = ref()
	const wordInfo = ref({
		word: '',
		familiar: 0,
		id: '0',
		interpretations: [],
		sentence: [
			{
				ch: '这个东西很重要',
				en: 'This thing is very important'
			}, {
				ch: '那个东西也很重要',
				en: 'That thing is also very important'
			}
		]
	})

	async function handleWordInfo(word : string) {
		if (!word) {
			console.log('这不是文字')
			return
		}
		const response = await getWord(word)
		const { data } = response ?? {}
		wordInfo.value.interpretations = []
		if (data) {
			const { word, part_of_speech } = data
			wordInfo.value.word = word
			wordInfo.value.id = data.id
			wordInfo.value.interpretations = Object.keys(part_of_speech).filter(key => part_of_speech[key]).map(key => {
				const value = part_of_speech[key]
				const [prefix] = key.split('_');
				return {
					type: prefix,
					data: value
				}
			})
		}
	}

	// 事件处理函数
	const handleTap = async (event : any) => {
		const currentData = event.target.dataset.word
		await handleWordInfo(currentData.text)

		viewWordDialog.value.open()

	};

	function changeUnkown() {
		const { word } = wordInfo.value
		const toFamiliar = 1
		handleWordFamiliar(word, toFamiliar)
		changeWordDialog.value.close()
		viewWordDialog.value.close()
	}

	function cancelChangeFamiliar() {
		changeWordDialog.value.close()
		viewWordDialog.value.close()
	}

	function handleWordFamiliar(changeWord : string, familiar : FamiliarType) {
		// const n = performance.now()
		for (let item of chapter.value.content) {
			if (!['text'].includes(item.type) || !Array.isArray(((item as TextInterface).data))) {
				continue;
			}
			for (let wordInfo of (item as TextInterface).data) {
				const downChangeWord = changeWord.toLocaleLowerCase().trim()
				const downWord = wordInfo.word.toLocaleLowerCase().trim()
				if (downWord === downChangeWord) {
					(wordInfo as WordInterface).familiar = familiar
				}
			}
		}
		// console.log('改变单词的熟悉度,算法耗时:' + (performance.now() - n) / 1000 + '秒')
	}

	function handleFamiliar(toFamiliar : FamiliarType) {
		const execFamiliar = {
			1: () => {
				changeWordDialog.value.open()
			},
			2: () => {
				const { word } = wordInfo.value
				handleWordFamiliar(word, toFamiliar)
				viewWordDialog.value.close()
				uni.showToast({
					title: `加入学习词库 : [${word}]`,
					icon: 'none'
				})
			},
			3: () => {
				const { word } = wordInfo.value
				handleWordFamiliar(word, toFamiliar)
				viewWordDialog.value.close()
				uni.showToast({
					title: `已斩获[${word}]加入您的词库`,
					icon: 'none'
				})
			}
		}

		execFamiliar[toFamiliar]()
	}

	function getFamiliarColor(familiar : FamiliarType) {
		const colorMap = {
			1: 'unknown',
			2: 'study',
			3: 'normal'
		}
		return colorMap[familiar]
	}



	const chapter = ref<ChapterInterface>({
		title: 'Chapter 1',
		content: [
			{
				"type": "text",
				"data": [
					{
						"word": "Once",
						"familiar": 3,
						"id": "1-0"
					},
					{
						"word": "main",
						"familiar": 3,
						"id": "1-867"
					},
					{
						"word": "when",
						"familiar": 3,
						"id": "1-1"
					},
					{
						"word": "I",
						"familiar": 2,
						"id": "1-2"
					},
					{
						"word": "was",
						"familiar": 3,
						"id": "1-3"
					},
					{
						"word": "six",
						"familiar": 3,
						"id": "1-4"
					},
					{
						"word": "years",
						"familiar": 2,
						"id": "1-5"
					},
					{
						"word": "old",
						"familiar": 3,
						"id": "1-6"
					},
					{
						"word": "I",
						"familiar": 3,
						"id": "1-7"
					},
					{
						"word": "saw",
						"familiar": 2,
						"id": "1-8"
					},
					{
						"word": "a",
						"familiar": 3,
						"id": "1-9"
					},
					{
						"word": "magnificent",
						"familiar": 3,
						"id": "1-10"
					},
					{
						"word": "picture",
						"familiar": 2,
						"id": "1-11"
					},
					{
						"word": "in",
						"familiar": 3,
						"id": "1-12"
					},
					{
						"word": "a",
						"familiar": 3,
						"id": "1-13"
					},
					{
						"word": "book",
						"familiar": 2,
						"id": "1-14"
					},
					{
						"word": ",",
						"type": "sign",
						"id": "1-15"
					},
					{
						"word": "called",
						"familiar": 3,
						"id": "1-16"
					},
					{
						"word": "True",
						"familiar": 2,
						"id": "1-17"
					},
					{
						"word": "Stories",
						"familiar": 3,
						"id": "1-18"
					},
					{
						"word": "from",
						"familiar": 3,
						"id": "1-19"
					},
					{
						"word": "Nature",
						"familiar": 2,
						"id": "1-20"
					},
					{
						"word": ",",
						"type": "sign",
						"id": "1-21"
					},
					{
						"word": "about",
						"familiar": 3,
						"id": "1-22"
					},
					{
						"word": "the",
						"familiar": 2,
						"id": "1-23"
					},
					{
						"word": "primeval",
						"familiar": 3,
						"id": "1-24"
					},
					{
						"word": "forest",
						"familiar": 3,
						"id": "1-25"
					}, {
						"word": ".",
						"familiar": 3,
						"id": "1-159"
					}, {
						"word": "It",
						"familiar": 3,
						"id": "1-235"
					},
					{
						"word": "was",
						"familiar": 2,
						"id": "1-26"
					},
					{
						"word": "a",
						"familiar": 3,
						"id": "1-27"
					},
					{
						"word": "picture",
						"familiar": 3,
						"id": "1-28"
					},
					{
						"word": "of",
						"familiar": 2,
						"id": "1-29"
					},
					{
						"word": "a",
						"familiar": 3,
						"id": "1-30"
					},
					{
						"word": "boa",
						"familiar": 3,
						"id": "1-31"
					},
					{
						"word": "constrictor",
						"familiar": 2,
						"id": "1-32"
					},
					{
						"word": "in",
						"familiar": 3,
						"id": "1-33"
					},
					{
						"word": "the",
						"familiar": 3,
						"id": "1-34"
					},
					{
						"word": "act",
						"familiar": 2,
						"id": "1-35"
					},
					{
						"word": "of",
						"familiar": 3,
						"id": "1-36"
					},
					{
						"word": "swallowing",
						"familiar": 3,
						"id": "1-37"
					},
					{
						"word": "an",
						"familiar": 2,
						"id": "1-38"
					},
					{
						"word": "animal.Here",
						"familiar": 3,
						"id": "1-39"
					},
					{
						"word": "is",
						"familiar": 3,
						"id": "1-40"
					},
					{
						"word": "a",
						"familiar": 2,
						"id": "1-41"
					},
					{
						"word": "copy",
						"familiar": 3,
						"id": "1-42"
					},
					{
						"word": "of",
						"familiar": 3,
						"id": "1-43"
					},
					{
						"word": "the",
						"familiar": 2,
						"id": "1-44"
					},
					{
						"word": "drawing.",
						"familiar": 3,
						"id": "1-45"
					}
				],
				"id": "1"
			},
			{
				id: '79',
				type: "img",
				src: 'https://img2.baidu.com/it/u=1032619509,737287811&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=650'
			},
			{
				"type": "text",
				"data": [
					{
						"word": "In",
						"familiar": 3,
						"id": "2-0"
					},
					{
						"word": "the",
						"familiar": 3,
						"id": "2-1"
					},
					{
						"word": "book",
						"familiar": 2,
						"id": "2-2"
					},
					{
						"word": "it",
						"familiar": 3,
						"id": "2-3"
					},
					{
						"word": "said",
						"familiar": 3,
						"id": "2-4"
					},
					{
						"word": ",",
						"type": "sign",
						"id": "2-5"
					},
					{
						"word": "\"Boa",
						"familiar": 3,
						"id": "2-6"
					},
					{
						"word": "constrictors",
						"familiar": 3,
						"id": "2-7"
					},
					{
						"word": "swallow",
						"familiar": 2,
						"id": "2-8"
					},
					{
						"word": "their",
						"familiar": 3,
						"id": "2-9"
					},
					{
						"word": "prey",
						"familiar": 3,
						"id": "2-10"
					},
					{
						"word": "whole",
						"familiar": 2,
						"id": "2-11"
					},
					{
						"word": ",",
						"type": "sign",
						"id": "2-12"
					},
					{
						"word": "without",
						"familiar": 1,
						"id": "2-13"
					},
					{
						"word": "chewing",
						"familiar": 2,
						"id": "2-14"
					},
					{
						"word": "it",
						"familiar": 1,
						"id": "2-15"
					},
					{
						"word": ".",
						"type": "sign",
						"id": "2-16"
					},
					{
						"word": "After",
						"familiar": 2,
						"id": "2-17"
					},
					{
						"word": "that",
						"familiar": 1,
						"id": "2-18"
					},
					{
						"word": "they",
						"familiar": 1,
						"id": "2-19"
					},
					{
						"word": "are",
						"familiar": 2,
						"id": "2-20"
					},
					{
						"word": "not",
						"familiar": 1,
						"id": "2-21"
					},
					{
						"word": "able",
						"familiar": 1,
						"id": "2-22"
					},
					{
						"word": "to",
						"familiar": 2,
						"id": "2-23"
					},
					{
						"word": "move",
						"familiar": 3,
						"id": "2-24"
					},
					{
						"word": ",",
						"type": "sign",
						"id": "2-25"
					},
					{
						"word": "and",
						"familiar": 3,
						"id": "2-26"
					},
					{
						"word": "they",
						"familiar": 3,
						"id": "2-27"
					},
					{
						"word": "sleep",
						"familiar": 2,
						"id": "2-28"
					},
					{
						"word": "through",
						"familiar": 3,
						"id": "2-29"
					},
					{
						"word": "the",
						"familiar": 3,
						"id": "2-30"
					},
					{
						"word": "six",
						"familiar": 2,
						"id": "2-31"
					},
					{
						"word": "months",
						"familiar": 3,
						"id": "2-32"
					},
					{
						"word": "that",
						"familiar": 3,
						"id": "2-33"
					},
					{
						"word": "they",
						"familiar": 2,
						"id": "2-34"
					},
					{
						"word": "need",
						"familiar": 3,
						"id": "2-35"
					},
					{
						"word": "for",
						"familiar": 3,
						"id": "2-36"
					},
					{
						"word": "digestion.\"",
						"familiar": 2,
						"id": "2-37"
					}
				],
				"id": "2"
			},
			{
				id: '76',
				type: "img",
				src: 'https://img2.baidu.com/it/u=1032619509,737287811&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=650'
			},
			{
				"type": "text",
				"data": [
					{
						"word": "In",
						"familiar": 3,
						"id": "3-0"
					},
					{
						"word": "the",
						"familiar": 3,
						"id": "3-1"
					},
					{
						"word": "book",
						"familiar": 2,
						"id": "3-2"
					},
					{
						"word": "it",
						"familiar": 3,
						"id": "3-3"
					},
					{
						"word": "said",
						"familiar": 3,
						"id": "3-4"
					},
					{
						"word": ",",
						"type": "sign",
						"id": "3-5"
					},
					{
						"word": "\"Boa",
						"familiar": 3,
						"id": "3-6"
					},
					{
						"word": "constrictors",
						"familiar": 1,
						"id": "3-7"
					},
					{
						"word": "swallow",
						"familiar": 2,
						"id": "3-8"
					},
					{
						"word": "their",
						"familiar": 1,
						"id": "3-9"
					},
					{
						"word": "prey",
						"familiar": 3,
						"id": "3-10"
					},
					{
						"word": "whole",
						"familiar": 2,
						"id": "3-11"
					},
					{
						"word": ",",
						"type": "sign",
						"id": "3-12"
					},
					{
						"word": "without",
						"familiar": 3,
						"id": "3-13"
					},
					{
						"word": "chewing",
						"familiar": 2,
						"id": "3-14"
					},
					{
						"word": "it",
						"familiar": 3,
						"id": "3-15"
					},
					{
						"word": ".",
						"type": "sign",
						"id": "3-16"
					},
					{
						"word": "After",
						"familiar": 2,
						"id": "3-17"
					},
					{
						"word": "that",
						"familiar": 3,
						"id": "3-18"
					},
					{
						"word": "they",
						"familiar": 3,
						"id": "3-19"
					},
					{
						"word": "are",
						"familiar": 2,
						"id": "3-20"
					},
					{
						"word": "not",
						"familiar": 3,
						"id": "3-21"
					},
					{
						"word": "able",
						"familiar": 3,
						"id": "3-22"
					},
					{
						"word": "to",
						"familiar": 2,
						"id": "3-23"
					},
					{
						"word": "move",
						"familiar": 3,
						"id": "3-24"
					},
					{
						"word": ",",
						"type": "sign",
						"id": "3-25"
					},
					{
						"word": "and",
						"familiar": 3,
						"id": "3-26"
					},
					{
						"word": "they",
						"familiar": 3,
						"id": "3-27"
					},
					{
						"word": "sleep",
						"familiar": 2,
						"id": "3-28"
					},
					{
						"word": "through",
						"familiar": 3,
						"id": "3-29"
					},
					{
						"word": "the",
						"familiar": 3,
						"id": "3-30"
					},
					{
						"word": "six",
						"familiar": 2,
						"id": "3-31"
					},
					{
						"word": "months",
						"familiar": 1,
						"id": "3-32"
					},
					{
						"word": "that",
						"familiar": 1,
						"id": "3-33"
					},
					{
						"word": "they",
						"familiar": 2,
						"id": "3-34"
					},
					{
						"word": "need",
						"familiar": 1,
						"id": "3-35"
					},
					{
						"word": "for",
						"familiar": 1,
						"id": "3-36"
					},
					{
						"word": "digestion.\"",
						"familiar": 2,
						"id": "3-37"
					}
				],
				"id": "3"
			},
			{
				id: '234',
				type: 'img',
				src: 'https://q1.itc.cn/images01/20240215/e48185777121485687a875741f680584.jpeg'
			},
			{
				"type": "text",
				"data": [
					{
						"word": "In",
						"familiar": 1,
						"id": "4-0"
					},
					{
						"word": "the",
						"familiar": 1,
						"id": "4-1"
					},
					{
						"word": "book",
						"familiar": 2,
						"id": "4-2"
					},
					{
						"word": "it",
						"familiar": 1,
						"id": "4-3"
					},
					{
						"word": "said",
						"familiar": 3,
						"id": "4-4"
					},
					{
						"word": ",",
						"type": "sign",
						"id": "4-5"
					},
					{
						"word": "\"Boa",
						"familiar": 3,
						"id": "4-6"
					},
					{
						"word": "constrictors",
						"familiar": 3,
						"id": "4-7"
					},
					{
						"word": "swallow",
						"familiar": 2,
						"id": "4-8"
					},
					{
						"word": "their",
						"familiar": 3,
						"id": "4-9"
					},
					{
						"word": "prey",
						"familiar": 3,
						"id": "4-10"
					},
					{
						"word": "whole",
						"familiar": 2,
						"id": "4-11"
					},
					{
						"word": ",",
						"type": "sign",
						"id": "4-12"
					},
					{
						"word": "without",
						"familiar": 3,
						"id": "4-13"
					},
					{
						"word": "chewing",
						"familiar": 2,
						"id": "4-14"
					},
					{
						"word": "it",
						"familiar": 3,
						"id": "4-15"
					},
					{
						"word": ".",
						"type": "sign",
						"id": "4-16"
					},
					{
						"word": "After",
						"familiar": 2,
						"id": "4-17"
					},
					{
						"word": "that",
						"familiar": 3,
						"id": "4-18"
					},
					{
						"word": "they",
						"familiar": 3,
						"id": "4-19"
					},
					{
						"word": "are",
						"familiar": 2,
						"id": "4-20"
					},
					{
						"word": "not",
						"familiar": 3,
						"id": "4-21"
					},
					{
						"word": "able",
						"familiar": 3,
						"id": "4-22"
					},
					{
						"word": "to",
						"familiar": 2,
						"id": "4-23"
					},
					{
						"word": "move",
						"familiar": 3,
						"id": "4-24"
					},
					{
						"word": ",",
						"type": "sign",
						"id": "4-25"
					},
					{
						"word": "and",
						"familiar": 3,
						"id": "4-26"
					},
					{
						"word": "they",
						"familiar": 3,
						"id": "4-27"
					},
					{
						"word": "sleep",
						"familiar": 2,
						"id": "4-28"
					},
					{
						"word": "through",
						"familiar": 3,
						"id": "4-29"
					},
					{
						"word": "the",
						"familiar": 1,
						"id": "4-30"
					},
					{
						"word": "six",
						"familiar": 2,
						"id": "4-31"
					},
					{
						"word": "months",
						"familiar": 1,
						"id": "4-32"
					},
					{
						"word": "that",
						"familiar": 1,
						"id": "4-33"
					},
					{
						"word": "they",
						"familiar": 2,
						"id": "4-34"
					},
					{
						"word": "need",
						"familiar": 1,
						"id": "4-35"
					},
					{
						"word": "for",
						"familiar": 1,
						"id": "4-36"
					},
					{
						"word": "digestion.\"",
						"familiar": 2,
						"id": "4-37"
					}
				],
				"id": "4"
			},
			{
				"type": "text",
				"data": [
					{
						"word": "In",
						"familiar": 3,
						"id": "5-0"
					},
					{
						"word": "the",
						"familiar": 3,
						"id": "5-1"
					},
					{
						"word": "book",
						"familiar": 2,
						"id": "5-2"
					},
					{
						"word": "it",
						"familiar": 3,
						"id": "5-3"
					},
					{
						"word": "said",
						"familiar": 3,
						"id": "5-4"
					},
					{
						"word": ",",
						"type": "sign",
						"id": "5-5"
					},
					{
						"word": "\"Boa",
						"familiar": 3,
						"id": "5-6"
					},
					{
						"word": "constrictors",
						"familiar": 3,
						"id": "5-7"
					},
					{
						"word": "swallow",
						"familiar": 2,
						"id": "5-8"
					},
					{
						"word": "their",
						"familiar": 3,
						"id": "5-9"
					},
					{
						"word": "prey",
						"familiar": 3,
						"id": "5-10"
					},
					{
						"word": "whole",
						"familiar": 2,
						"id": "5-11"
					},
					{
						"word": ",",
						"type": "sign",
						"id": "5-12"
					},
					{
						"word": "without",
						"familiar": 3,
						"id": "5-13"
					},
					{
						"word": "chewing",
						"familiar": 2,
						"id": "5-14"
					},
					{
						"word": "it",
						"familiar": 3,
						"id": "5-15"
					},
					{
						"word": ".",
						"type": "sign",
						"id": "5-16"
					},
					{
						"word": "After",
						"familiar": 2,
						"id": "5-17"
					},
					{
						"word": "that",
						"familiar": 3,
						"id": "5-18"
					},
					{
						"word": "they",
						"familiar": 3,
						"id": "5-19"
					},
					{
						"word": "are",
						"familiar": 2,
						"id": "5-20"
					},
					{
						"word": "not",
						"familiar": 1,
						"id": "5-21"
					},
					{
						"word": "able",
						"familiar": 1,
						"id": "5-22"
					},
					{
						"word": "to",
						"familiar": 2,
						"id": "5-23"
					},
					{
						"word": "move",
						"familiar": 1,
						"id": "5-24"
					},
					{
						"word": ",",
						"type": "sign",
						"id": "5-25"
					},
					{
						"word": "and",
						"familiar": 1,
						"id": "5-26"
					},
					{
						"word": "they",
						"familiar": 1,
						"id": "5-27"
					},
					{
						"word": "sleep",
						"familiar": 2,
						"id": "5-28"
					},
					{
						"word": "through",
						"familiar": 1,
						"id": "5-29"
					},
					{
						"word": "the",
						"familiar": 1,
						"id": "5-30"
					},
					{
						"word": "six",
						"familiar": 2,
						"id": "5-31"
					},
					{
						"word": "months",
						"familiar": 1,
						"id": "5-32"
					},
					{
						"word": "that",
						"familiar": 1,
						"id": "5-33"
					},
					{
						"word": "they",
						"familiar": 2,
						"id": "5-34"
					},
					{
						"word": "need",
						"familiar": 1,
						"id": "5-35"
					},
					{
						"word": "for",
						"familiar": 1,
						"id": "5-36"
					},
					{
						"word": "digestion.\"",
						"familiar": 2,
						"id": "5-37"
					}
				],
				"id": "5"
			}
		]
	})
</script>

<style lang="scss" scoped>
	.unknown {
		color: #b24140
	}

	.study {
		color: #846ed2
	}

	.normal {
		color: #373131
	}

	.word-info {
		border-radius: 20rpx;
		width: 560rpx;
	}

	.container {
		padding: 22rpx;
		font-size: 38rpx;
		background-color: #fdf9ef;

		// 外容器样式
		.paragraph {
			display: flex;
			flex-wrap: wrap;
			margin-bottom: 20rpx;
			white-space: break-spaces;


			.firstWord {
				margin-left: 80rpx;
				margin-right: 12rpx;
			}
		}
	}

	.child-text {
		// 子文本样式
		padding: 10px;
		margin: 5px;
		background-color: #f0f0f0;
		border: 1px solid #ccc;
	}
</style>